<!DOCTYPE html>
<html>
<head>
    <title>正赛</title>
</head>

<body>
<link rel="stylesheet" href="./CSSindex.css">
<canvas id="raceTrack" width="800" height="400"></canvas>
<div id="raceInfo">
    <h3>赛车信息</h3>
    <div id="totalLapsInfo" style="background: #333; color: white; padding: 5px; border-radius: 4px; margin-bottom: 10px; text-align: center;">
                    总圈数: <span id="totalLapsDisplay"></span>
                </div>
                <div class="sort-controls">
                    <button id="sortByPosition" class="active">按场上位置</button>
                    <button id="sortByLapTime">按单圈速度</button>
                </div>
                <table id="raceTable">
                    <thead>
                        <tr>
                            <th>车号</th>
                            <th>位置</th>
                            <th>圈数</th>
                            <th>上圈时间</th>
                            <th>轮胎</th>
                            <th>损耗</th>
                        </tr>
                    </thead>
                    <tbody id="raceTableBody"></tbody>
                </table>
            </div>
            <button id="pitButton">进站</button>
            <div id="pitTimeDisplay" style="position: absolute; bottom: 60px; right: 20px; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 8px; display: none;">
                <div>停车时间: <span id="currentPitTime">0.0s</span></div>
            </div>
            <div id="pitPanel">
                <h3>选择轮胎类型</h3>
                <button id="softTire">软胎</button>
                <button id="mediumTire">中性胎</button>
                <button id="hardTire">硬胎</button>
                <button id="PitBack">取消</button>
            </div>
            <button id="backToMenu" style="position: absolute; bottom: 20px; left: 20px; padding: 10px 20px;" onclick="backToMenu()">
                返回主菜单
            </button>
<script src="./JSindex_race.js"></script>
</body>

</html>